<template>
	<view>
		<!-- <view class="total-assets">
			<view class="title-box">
				{{$t('my.totalAssets')}}
				<image src="../../static/img/my/eye-hide.png" style="width: 36rpx; height: 20rpx;margin-left: 10rpx;"></image>
			</view>
			<view class="number-box">
				<text>{{columns.sumBalance || '0'}}</text>
				<image src="../../static/img/my/btc.png" style="width: 40rpx; height: 40rpx;margin-left: 10rpx;"></image>
			</view>
			<view class="rmb-box">
				≈￥{{columns.cnyBalance || '0'}}
			</view>
		</view> -->

		<view class="list-title-box" @click="goPage('/pages/my/currency')">
			{{$t('my.history')}}
		</view>
		<view class="list-box">
			<view class="tab-box">
				<text :class="bizcode == ''? 'active' : ''" @click="bizcode = ''">{{$t('my.all')}}</text>
				<text :class="bizcode == '101_102_103'? 'active' : ''" @click="bizcode = '101_102_103'">{{$t('my.recharge')}}&{{$t('my.withdraw')}}</text>
				<text :class="bizcode == '201_202_204_203_205_206'? 'active' : ''" @click="bizcode = '201_202_204_203_205_206'">{{$t('trade.buy')}}&{{$t('trade.sell')}}</text>
				<text :class="bizcode == '301_302'? 'active' : ''" @click="bizcode = '301_302'">{{$t('my.transfer')}}</text>
			</view>
			
			<z-paging ref="paging" v-model="dataList" @query="queryList" :use-page-scroll="true">
				<view class="item" v-for="(item,index) in dataList">
					<!-- <view class='status-box'>
						{{item.bizName}}
					</view> -->
					<view class="text-box">
						<text>{{item.currencyCode}}</text>
						{{timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')}}
					</view>
					<view class="text-box">
						<!-- <text>{{$t('my.type')}}</text> -->
						<text>{{item.bizName}}</text>
						 <template v-if="item.bizCode == 101 || item.bizCode == 301 || item.bizCode == 201 || item.bizCode == 401 || item.bizCode == 402 || item.bizCode == 501 || item.bizCode == 801 || item.bizCode == 802 || item.bizCode == 901 || item.bizCode == 902 || item.bizCode == 903">+</template>
						 <template v-else>-</template>
						 {{item.amount}} 
						 <!-- {{item.currencyCode}} -->
					</view>
					
					<!-- <view class="text-box">
						<text>{{$t('my.type')}}</text>
						<text v-if="item.bizcode == 101 || item.bizcode == 201 || item.bizcode == 301">+</text>
						<text v-else>-</text>
						{{item.amount}}
					</view> -->
					
					<view class="text-box">
						<text>{{$t('robot.balance')}}</text>
						{{item.balance}}
					</view>
				</view>
			</z-paging>
			
			
			
		</view>

		<view class="bottom-box"></view>
		<tabbarVue :current="4"></tabbarVue>
	</view>
</template>

<script setup>
	import tabbarVue from '@/components/tabbar/index.vue'
	import { timeFormat } from '@/uni_modules/uview-plus';
	import { onLoad } from '@dcloudio/uni-app'
	import { ref,watch } from 'vue';
	import { getQueryBalanceFlow, getCurrencyBalance } from '@/common/api/common.js'

	const activeMarketId = ref(1)
	const currencyCode = ref('USDC')
	const bizcode = ref('')
	const paging = ref(null)
	const dataList = ref([])
	const columns = ref({});
	
	watch(bizcode, (newValue, oldValue) => {
	  paging.value.reload();
	});
	
	const queryList = (pageNo, pageSize) => {
		// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
		// 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
		// 101充值，102提现，201买入，202卖出，301划入，302划出
		let params = {
			marketId: activeMarketId.value,
			currencyCode: currencyCode.value,
			bizCode: bizcode.value,
			page: pageNo - 1,
			pageSize: pageSize
		}
		getQueryBalanceFlow(params).then(res => {
			if(res.status == 0) {
				paging.value.complete(res.result.content);
			}else {
				paging.value.complete(false);
			}
		}).catch(res => {
			// 如果请求失败写paging.value.complete(false)，会自动展示错误页面
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}
	
	// const getCurrencyBalanceFn = async (marketId) => {
	// 	const res = await getCurrencyBalance({
	// 		marketId: activeMarketId.value
	// 	})
	// 	if(res.status == 0){
	// 		columns.value = res.result.find(item => item.currencyCode == currencyCode.value)
	// 	}
	// }
	
	
	const goPage = url => {
		uni.navigateTo({
			url: url
		})
	}
	
	
	
	onLoad((op) => {
		if(op) {
			currencyCode.value = op.currencyCode
			activeMarketId.value = op.marketId
		}
	})
</script>

<style lang="scss" scoped>
	.total-assets {
		width: calc(100vw - 80rpx);
		margin: 40rpx auto 0;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		background: #f5f5f5;
		border-radius: 16rpx;

		.title-box {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-weight: bold;
			font-size: 30rpx;
			color: #1F1F1F;
		}

		.number-box {
			margin-top: 40rpx;

			text {
				font-weight: bold;
				font-size: 60rpx;
				color: #1F1F1F;
			}
		}

		.rmb-box {
			color: #1f1f1f80;
			padding-top: 6rpx;
		}

	}

	.list-title-box {
		font-weight: bold;
		font-size: 30rpx;
		color: #1F1F1F;
		padding: 40rpx 40rpx 20rpx;
		box-sizing: border-box;
	}

	.list-box {
		padding: 0 40rpx;
		width: calc(100vw - 80rpx);
		padding: 0 40rpx;
		margin:0 auto;
		box-sizing: border-box;
		background: #f5f5f5;
		border-radius: 16rpx;
		.tab-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			border-bottom: 1rpx solid #00000030;
			
			text{
				color: #1f1f1f80;
			}
			.active{
				color: #1f1f1f;
			}
		}

		.item {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #00000030;
			.status-box{
				font-weight: bold;
				font-size: 24rpx;
				color: #1F1F1F;
			}
			.text-box{
				height: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #1F1F1F80;
			}
		}
	}
</style>